import classNames from 'classnames';
import { useState } from 'react';
import styles from './style.module.css';
import { TabsOptions } from './config';

function Home() {
  const [currentId, setCurrentId] = useState(TabsOptions[0].id);

  return (
    <div className={styles.home}>
      <div className={styles.gradient}>
        <div className={styles.banner}>Kawhi</div>
      </div>
      <div className={styles.tabs}>
        {TabsOptions.map((item) => {
          return (
            <div
              key={item.id}
              onClick={() => setCurrentId(item.id)}
              className={classNames(styles.btn, 'hvr-shutter-out-horizontal', 'flex-1', {
                [styles.active]: item.id === currentId,
              })}
            >
              {item.name}
            </div>
          );
        })}
      </div>
      <div>
      </div>
      <a href="https://github.com/vitejs/vite"></a>
      <a href="https://github.com/vitejs/vite/stargazers"></a>
    </div>
  );
}

export default Home;
